<script setup>
import SecondaryCard from '@/views/home-view/secondaryCard.vue'

import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { getHomeTaskInfo, getHomeTemplateInfo } from '@/api/home-view'
import { Message } from 'element-ui'

defineProps({
  pkid: {
    type: String,
    default: '',
  },
})

const user = JSON.parse(localStorage.getItem('user'))?.user || {}

const rightShow = ref(false)

const collapseInfo = ref([
  {
    status: '-2',
    baseStr: '未填报区县',
    name: '',
    content: '',
  },
  {
    status: '0',
    baseStr: '待提交区县',
    name: '',
    content: '',
  },
  {
    status: '1',
    baseStr: '已退回区县',
    name: '',
    content: '',
  },
  {
    status: '2',
    baseStr: '待审核区县',
    name: '',
    content: '',
  },
  {
    status: '-1',
    baseStr: '已通过区县',
    name: '',
    content: '',
  },
])

const tableData = ref([])

const option = {
  legend: {
    top: '-2%',
    // data: ['基本指标', '特色指标'],
  },
  grid: {
    top: 53,
    left: 5,
    right: 0,
    bottom: 0,
    containLabel: true,
  },
  tooltip: {},
  radar: {
    radius: ['0', '65%'],
    center: ['50%', '50%'], // 图表的位置 x,y方向
    // shape: 'circle',
    indicator: [
      { name: '住房', max: 6500 },
      { name: '城区', max: 16000 },
      { name: '街区', max: 30000 },
      { name: '小区', max: 38000 },
      { name: '建议', max: 52000 },
      { name: '满意度', max: 25000 },
    ],
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: '基本指标',
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: '特色指标',
        },
      ],
    },
  ],
}

let rightChart
const rightChartRef = ref()

const initRightChart = () => {
  rightChart = echarts.init(rightChartRef.value, 'light')
  rightChart.setOption(option)
}

const leftOption = {
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      // name: 'Access From',
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['30%', '45%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
      },
      label: {
        show: true,
        // position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          // fontSize: 40,
          // fontWeight: 'bold',
        },
      },
      labelLine: {
        show: true,
      },
      data: [
        { value: 1048, name: '已通过' },
        { value: 735, name: '已退回' },
        { value: 580, name: '未填报' },
        { value: 484, name: '待提交' },
        { value: 300, name: '待审核' },
      ],
    },
  ],
}

let leftChart
const leftChartRef = ref()

const initLeftChart = () => {
  if (!leftChartRef.value) return
  leftChart = echarts.init(leftChartRef.value, 'light')
  leftChart.setOption(leftOption)
}

onMounted(() => {
  initRightChart()
  initLeftChart()
})

const activeNames = ref([])

const getLeftData = (params) => {
  if (!params) return
  const obj = {
    baseId: params,
  }
  if (user.roleLevel === 2) {
    obj.regionId = user.refId
  }
  getHomeTemplateInfo(obj).then((res) => {
    if (res.success) {
      // console.log(res.data)
      tableData.value = res.data.templateTotal || []
      const radar = option.radar
      const series = option.series

      radar.indicator = res.data.baseTotal.map((item) => {
        return {
          name: item.dimensionName,
          max: 100,
        }
      })
      const baseData = res.data.baseTotal
        // .sort((a, b) => a.dimensionName.localeCompare(b.dimensionName))
        .map((item) => {
          // item 基本指标
          let total = item.indexCount
          // console.log(total)
          if (user.roleLevel === 0 || user.roleLevel === 4) {
            total = total * res.data.regionTotal
          }
          const find = res.data.completeTotal.find(
            (i) => i.dimension_name === item.dimensionName
          )
          // console.log(total)
          // console.log(find)
          return (((find?.total || 0) / total) * 100).toFixed(2)
        })
      // let specialData = res.data.specialTotal
      //   .sort((a, b) => a.dimensionName.localeCompare(b.dimensionName))
      //   .map((item) => item.indexCount)
      // if (!specialData.length) {
      //   specialData = baseData.map(() => 0)
      // }
      // console.log(baseData)
      series[0].data = [
        {
          value: baseData,
          name: '基本指标',
        },
        // {
        //   value: specialData,
        //   name: '特色指标',
        // },
      ]
      rightChart.resize()
      rightChart.setOption(option)
    } else {
      Message.error(res.message)
    }
  })
}

const getRightData = (params) => {
  if (!params) return
  if (!leftChartRef.value) return
  getHomeTaskInfo({
    baseId: params,
  }).then((res) => {
    if (res.success) {
      // console.log(res.data)
      if (res.data?.length) {
        rightShow.value = true
        console.log(res.data)
        collapseInfo.value = collapseInfo.value.map((item) => {
          const temp = res.data.find((f) => f.status == item.status)
          // console.log(temp)
          return {
            ...item,
            name: `${item.baseStr}: ${temp?.total || ''}`,
            content: temp?.areaname || '',
          }
        })
        leftOption.series[0].data = collapseInfo.value.map((item) => {
          const temp = res.data.find((f) => f.status == item.status)
          return {
            value: temp?.total || '',
            name: item.baseStr.replace('区县', ''),
          }
        })
        leftChart.resize()
        leftChart.setOption(leftOption)
      } else {
        rightShow.value = false
      }
    } else {
      Message.error(res.message)
    }
  })
}

const inputData = (params) => {
  getLeftData(params)
  getRightData(params)
}

defineExpose({
  inputData,
})
</script>

<template>
  <div class="bottom-content">
    <secondary-card
      :class="['bottom-left', user.roleLevel !== 2 ? 'short' : '']"
      title="指标体系"
    >
      <div class="card-content" v-show="!!pkid">
        <div class="left" v-if="user.roleLevel === 2">
          <el-table :data="tableData">
            <el-table-column
              prop="dimensionName"
              label="维度"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="viewNames"
              label="分析视角"
            ></el-table-column>
            <el-table-column
              prop="indexCount"
              label="指标数量"
              width="180"
            ></el-table-column>
          </el-table>
        </div>
        <div class="right" ref="rightChartRef"></div>
      </div>
      <div class="card-content placeholder" v-show="!pkid">
        <el-empty description="请选择指标体系"></el-empty>
      </div>
    </secondary-card>
    <secondary-card
      class="bottom-right"
      title="填报进度"
      v-if="user.roleLevel === 0 || user.roleLevel === 4"
    >
      <div class="card-content" v-show="!!pkid">
        <div class="left-chart" ref="leftChartRef"></div>
        <div class="right">
          <el-collapse v-model="activeNames">
            <el-collapse-item
              v-for="(item, index) in collapseInfo"
              :key="index"
              :title="item.name"
              :name="index"
            >
              <div>{{ item.content }}</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="card-content placeholder" v-show="!pkid || !rightShow">
        <el-empty description="暂无发布对应指标体系的任务"></el-empty>
      </div>
    </secondary-card>
  </div>
</template>

<style scoped lang="scss">
.bottom-content {
  height: 100%;
  padding-bottom: 18px;
  box-sizing: border-box;
  display: flex;
  .bottom-left {
    width: 100%;
    height: 100%;

    &.short {
      width: 456px;
    }

    .card-content {
      padding: 0 20px;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      .left {
        width: 485px;
        height: 100%;

        :deep(.el-table) {
          height: calc(100% - 20px);

          .el-table__body-wrapper {
            height: calc(100% - 48px);
            overflow-y: auto;
          }
        }
      }

      .right {
        //margin-top: -80px;
        flex: 1;
        height: 100%;
      }

      &.placeholder {
        justify-content: center;
        align-items: center;
      }
    }
  }

  .bottom-right {
    flex: 1;
    margin-left: 0 !important;

    .card-content {
      padding: 0 20px;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      .left-chart {
        flex: 1;
      }

      .right {
        margin-left: 10px;
        margin-top: -40px;
        width: 385px;
        height: calc(100% + 20px);
        overflow-y: auto;
      }

      &.placeholder {
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
